<template>
  <div class="mymain">
    <PullRefresh @refresh="updateItems">
      <div slot="pullRefreshSlot">
        <div class="mymain_header">
          <div class="mymain_header_userinfo">
            <ItemImgHead
              :item="items"
              :isBigHead="isBigHead"
              :isAddContent="isAddContent"
            ></ItemImgHead>
            <div class="mymain_header_follows">
              <div class="mymain_header_follows_item">
                <a href="javascript:;" @click="myNoteClickhandle"
                  >{{ items.noteTotal }}
                  <p>{{ $t("lang.帖子") }}</p></a
                >
              </div>
              <div class="mymain_header_follows_item">
                <router-link
                  :to="{ name: 'FOLLOWER', params: { usid: items.userId } }"
                  >{{ items.follower }}
                  <p>{{ $t("lang.粉丝") }}</p></router-link
                >
              </div>
              <div class="mymain_header_follows_item">
                <router-link
                  :to="{ name: 'FOLLOWS', params: { usid: items.userId } }"
                  >{{ items.follows }}
                  <p>{{ $t("lang.已关注") }}</p></router-link
                >
              </div>
            </div>
          </div>
          <div class="mymain_description">
            {{ items.nickName }}
            <p>{{ items.description }}</p>
            <Tags :items="items.tags" :isClose="isClose"></Tags>
            <div class="mymain_description_other">
              <span class="mymain_description_tag"
                ><i class="icon-map"></i>{{ items.position }}</span
              >
            </div>
          </div>
          <router-link
            class="editbutton"
            :to="{
              name: 'EDITUSERINFO',
              params: { usid: $store.state.user.userId },
            }"
            >{{ $t("lang.编辑主页") }}</router-link
          >
          <Tabs :tabLen="tabLen">
            <span slot="tabsLeft"><i class="icon-modular"></i></span>
            <span slot="tabsCenter"><i class="icon-icon_at"></i></span>
            <span slot="tabsRight"><i class="icon-favorite"></i></span>
            <div slot="tabsLeftContent">
              <van-list
                v-model="leftLoading"
                :finished="leftFinished"
                :finished-text="$t('lang.已经到底了')"
                :error.sync="leftError"
                :error-text="this.$t('lang.请求失败，点击重新加载')"
                @load="leftOnLoad"
                v-if="myFeeds.length > 0"
              >
                <ThreeColumnList :items="myFeeds" key="tabsLeftContent">
                  <div slot="threeColumnItem" slot-scope="{ item }">
                    <ColumnGroupItem
                      :item="item"
                      :isShowHeader="isShowHeader"
                      name="CONTENT"
                    ></ColumnGroupItem>
                  </div>
                </ThreeColumnList>
              </van-list>
              <div v-else class="nodata">
                <NoContent :type="noContentType"></NoContent>
              </div>
            </div>
            <div slot="tabsCenterContent">
              <van-list
                v-model="centerLoading"
                :finished="centerFinished"
                :finished-text="$t('lang.已经到底了')"
                :error.sync="centerError"
                :error-text="this.$t('lang.请求失败，点击重新加载')"
                @load="centerOnLoad"
                v-if="atMyFeeds.length > 0"
              >
                <ThreeColumnList :items="atMyFeeds" key="tabsCenterContent">
                  <div slot="threeColumnItem" slot-scope="{ item }">
                    <ColumnGroupItem
                      :item="item"
                      :isShowHeader="isShowHeader"
                      name="CONTENT"
                    ></ColumnGroupItem>
                  </div>
                </ThreeColumnList>
              </van-list>
              <div v-else class="nodata">
                <NoContent :type="noContentType"></NoContent>
              </div>
            </div>
            <div slot="tabsRightContent">
              <van-list
                v-model="rightLoading"
                :finished="rightFinished"
                :finished-text="$t('lang.已经到底了')"
                :error.sync="rightError"
                :error-text="this.$t('lang.请求失败，点击重新加载')"
                @load="rightOnLoad"
                v-if="MyFavorite.length > 0"
              >
                <ThreeColumnList :items="MyFavorite" key="tabsRightContent">
                  <div slot="threeColumnItem" slot-scope="{ item }">
                    <ColumnGroupItem
                      :item="item"
                      :isShowHeader="isShowHeader"
                      name="CONTENT"
                    ></ColumnGroupItem>
                  </div>
                </ThreeColumnList>
              </van-list>
              <div v-else class="nodata">
                <NoContent :type="noContentType"></NoContent>
              </div>
            </div>
          </Tabs>
        </div>
      </div>
    </PullRefresh>
    <!-- <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :pulling-text="this.$t('lang.下拉即可刷新')"
      :loosing-text="this.$t('lang.释放即可刷新')"
      :loading-text="this.$t('lang.加载中')"
    >
      <div class="mymain_header">
        <div class="mymain_header_userinfo">
          <ItemImgHead
            :item="items"
            :isBigHead="isBigHead"
            :isAddContent="isAddContent"
          ></ItemImgHead>
          <div class="mymain_header_follows">
            <div class="mymain_header_follows_item">
              <a href="javascript:;" @click="myNoteClickhandle"
                >{{ items.noteTotal }}
                <p>{{ $t("lang.帖子") }}</p></a
              >
            </div>
            <div class="mymain_header_follows_item">
              <router-link
                :to="{ name: 'FOLLOWER', params: { usid: items.userId } }"
                >{{ items.follower }}
                <p>{{ $t("lang.粉丝") }}</p></router-link
              >
            </div>
            <div class="mymain_header_follows_item">
              <router-link
                :to="{ name: 'FOLLOWS', params: { usid: items.userId } }"
                >{{ items.follows }}
                <p>{{ $t("lang.已关注") }}</p></router-link
              >
            </div>
          </div>
        </div>
        <div class="mymain_description">
          {{ items.nickName }}
          <p>{{ items.description }}</p>
          <Tags :items="items.tags" :isClose="isClose"></Tags>
          <div class="mymain_description_other">
            <span class="mymain_description_tag"
              ><i class="icon-map"></i>{{ items.position }}</span
            >
          </div>
        </div>
        <router-link
          class="editbutton"
          :to="{
            name: 'EDITUSERINFO',
            params: { usid: $store.state.user.userId },
          }"
          >{{ $t("lang.编辑主页") }}</router-link
        >
        <Tabs :tabLen="tabLen">
          <span slot="tabsLeft"><i class="icon-modular"></i></span>
          <span slot="tabsCenter"><i class="icon-icon_at"></i></span>
          <span slot="tabsRight"><i class="icon-favorite"></i></span>
          <div slot="tabsLeftContent">
            <van-list
              v-model="leftLoading"
              :finished="leftFinished"
              :finished-text="$t('lang.已经到底了')"
              :error.sync="leftError"
              :error-text="this.$t('lang.请求失败，点击重新加载')"
              @load="leftOnLoad"
              v-if="myFeeds.length > 0"
            >
              <ThreeColumnList :items="myFeeds" key="tabsLeftContent">
                <div slot="threeColumnItem" slot-scope="{ item }">
                  <ColumnGroupItem
                    :item="item"
                    :isShowHeader="isShowHeader"
                    name="CONTENT"
                  ></ColumnGroupItem>
                </div>
              </ThreeColumnList>
            </van-list>
            <div v-else class="nodata">
              <NoContent :type="noContentType"></NoContent>
            </div>
          </div>
          <div slot="tabsCenterContent">
            <van-list
              v-model="centerLoading"
              :finished="centerFinished"
              :finished-text="$t('lang.已经到底了')"
              :error.sync="centerError"
              :error-text="this.$t('lang.请求失败，点击重新加载')"
              @load="centerOnLoad"
              v-if="atMyFeeds.length > 0"
            >
              <ThreeColumnList :items="atMyFeeds" key="tabsCenterContent">
                <div slot="threeColumnItem" slot-scope="{ item }">
                  <ColumnGroupItem
                    :item="item"
                    :isShowHeader="isShowHeader"
                    name="CONTENT"
                  ></ColumnGroupItem>
                </div>
              </ThreeColumnList>
            </van-list>
            <div v-else class="nodata">
              <NoContent :type="noContentType"></NoContent>
            </div>
          </div>
          <div slot="tabsRightContent">
            <van-list
              v-model="rightLoading"
              :finished="rightFinished"
              :finished-text="$t('lang.已经到底了')"
              :error.sync="rightError"
              :error-text="this.$t('lang.请求失败，点击重新加载')"
              @load="rightOnLoad"
              v-if="MyFavorite.length > 0"
            >
              <ThreeColumnList :items="MyFavorite" key="tabsRightContent">
                <div slot="threeColumnItem" slot-scope="{ item }">
                  <ColumnGroupItem
                    :item="item"
                    :isShowHeader="isShowHeader"
                    name="CONTENT"
                  ></ColumnGroupItem>
                </div>
              </ThreeColumnList>
            </van-list>
            <div v-else class="nodata">
              <NoContent :type="noContentType"></NoContent>
            </div>
          </div>
        </Tabs>
      </div>
    </van-pull-refresh> -->
  </div>
</template>
<script>
export default {
  name: "MyMain",
  components: {
    PullRefresh: () =>
      import(
        /* webpackChunkName:"pullRefresh" */ "../../components/common/pullRefresh.vue"
      ),
    ItemImgHead: () =>
      import(
        /* webpackChunkName: "itemPanelHeader" */ "../../components/common/itemImgHead"
      ),
    Tabs: () =>
      import(/* webpackChunkName: "tabs" */ "../../components/common/tabs"),
    ThreeColumnList: () =>
      import(
        /* webpackChunkName: "threeColumnList" */ "../../components/common/threeColumnList"
      ),
    ColumnGroupItem: () =>
      import(
        /* webpackChunkName:"columnGroupItem" */ "../../components/common/columnGroupItem"
      ),
    Tags: () =>
      import(/* webpackChunkName:"tags" */ "../../components/common/tags.vue"),
    NoContent: () =>
      import(
        /* webpackChunkName:"noContent" */ "../../components/common/noContent.vue"
      ),
  },
  data() {
    return {
      isShowHeader: false,
      items: {},
      isBigHead: true,
      isAddContent: true,
      isLoading: false,
      myFeeds: [],
      atMyFeeds: [],
      MyFavorite: [],
      isClose: false,
      tabLen: 3,
      leftLoading: false,
      leftFinished: true,
      leftError: false,
      centerLoading: false,
      centerFinished: true,
      centerError: false,
      rightLoading: false,
      rightFinished: true,
      rightError: false,
      noContentType: 10,
    };
  },
  created() {
    let that = this;
    this.updateItems(1).then(() => {
      that.updateMyFeeds(1).then(() => {
        that.updateAtMyFeeds(1).then(() => {
          that.updateMyFavorite(1).then(() => {});
        });
      });
    });
  },
  methods: {
    updateItems(pageNum, callback) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.items = {
          id: "0123456",
          userId: "0123456",
          userHead:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
          nickName: "undefined",
          position: "中国",
          isNewContent: true,
          description: "个人介绍信息，个人信息",
          noteTotal: 200,
          follower: 100,
          follows: 3000,
          tags: [
            "电影",
            "Vue",
            "React",
            "电影",
            "Vue",
            "React",
            "电影",
            "Vue",
            "React",
          ],
        };
        callback && callback();
        resolve();
      });
    },
    updateMyFeeds(pageNum, callback) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.myFeeds = [
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
        ];
        callback && callback();
        resolve();
      });
    },
    updateAtMyFeeds(pageNum, callback) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.atMyFeeds = [
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
        ];
        callback && callback();
        resolve();
      });
    },
    updateMyFavorite(pageNum, callback) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.MyFavorite = [
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
        ];
        callback && callback();
        resolve();
      });
    },
    myNoteClickhandle() {
      window.scrollTo(1, 1);
    },
    leftOnLoad() {},
    centerOnLoad() {},
    rightOnLoad() {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.mymain {
  .mymain_header {
    .mymain_header_userinfo {
      display: flex;
      .itemimghead {
        margin: 20 / @base;
      }
      .mymain_header_follows {
        padding: 30 / @base 0;
        width: 80%;
        display: flex;
        .mymain_header_follows_item {
          width: 33.3333%;
          font-weight: 700;
          p {
            font-weight: 400;
          }
        }
      }
    }
    .mymain_description {
      text-align: left;
      margin: 0 10 / @base;
      .mymain_description_other {
        clear: both;
        padding: 10 / @base 0 0;
        span {
          &.mymain_description_tag {
            border: 1 / @base solid #efefef;
            background-color: #efefef;
            padding: 5 / @base;
            border-radius: 5 / @base;
            i {
              font-size: 16 / @base;
              vertical-align: middle;
            }
          }
        }
      }
      p {
        padding: 10 / @base 0 0;
      }
    }
    .editbutton {
      clear: both;
      background-color: #fff;
      display: block;
      margin: 20 / @base 10 / @base;
      padding: 10 / @base 5 / @base;
      border: 1 / @base solid #ccc;
      border-radius: 5 / @base;
    }
  }
}
</style>
